<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>头部栏 Header bars-JQUERY MOBILE 中文API站</title>
<meta name="keywords" content="JQUERY MOBILE 1.0正式版中文手册,Jquery Mobile 1.0,Jquery mobile,移动框架开发手册,darklord,JQUERY MOBILE 1.0正式版,JQUERY API,jqmapi,jqm,jquery," />
<meta name="description" content="Jquery mobile中文API站，Jquery mobile 1.0正式版本中文手册，提供最新版Jquery mobile移动web与应用开发帮助。" />
<link rel="stylesheet" type="text/css" href="../../style/Jqueryapi.css" tppabs="http://www.jqmapi.com/style/Jqueryapi.css" />
<script src="../../style/lib/jquery-1.6.1.min.js" tppabs="http://www.jqmapi.com/style/lib/jquery-1.6.1.min.js"></script>
<script src="style/jqmapi.js" tppabs="http://www.jqmapi.com/componts/toolbar/style/jqmapi.js"></script>
<link rel="shortcut icon" href="../../style/img/favicon.ico" />
</head>
<body>
<div class="nav">
<iframe width="250px" scrolling="no" frameborder="0" allowtransparency="true" src="../../nav.html" tppabs="http://www.jqmapi.com/nav.html" height="1300px"></iframe>
</div>
<div class="main">
<script src="style/jqmapi.js" tppabs="http://www.jqmapi.com/componts/toolbar/style/jqmapi.js" type="text/javascript"></script>
<hr style="color:#595959;" />

<div class="content">
  <h1>头部栏结构 Header structure</h1>
  <div class="desc">
  <div>头部栏是处于页面顶部的工具栏，通常包含页面标题文字，文字左边和/或右边可以放置几个可选的按钮用作导航操作</div>
  <div>标题文字一般用h1标签，但是从h1-h6都是可以的，这样可以使结构有弹性。比如说，一个页面内包含了多个&quot;page&quot;标记的页面，这样可以给主&quot;page&quot;的标题文字用h1标签，次级&quot;page&quot;的标题文字用h2标签。所有的头部默认下在样式上都是相同的，保持的外观的一致性</div>
  </div>
  <div class="code"> 
    <p>&lt;div data-role=&quot;header&quot;&gt; <br /> 
      　
&lt;h1&gt;Page Title&lt;/h1&gt; <br />
&lt;/div&gt; </p>
</div>
<hr >
  <h1>默认的头部的特性　Default header features</h1>
  <div class="desc"><div>头部栏的主题样式默认情况下为"a"(黑色)，但是你可以很轻松的设置主题样式</div></div>
	<p class="indent"><strong>默认的头部栏</strong></p>
	<img src="../../images/Header bars_1.png" tppabs="http://www.jqmapi.com/images/Header%20bars_1.png">	
<div class="desc">
  <div><strong>看见back按钮了吗</strong>Jquery Mobile会自动给每个页面的头部栏生成一&quot;back&quot;按钮，来简化把按钮放进头部栏的过程。如果你不想?quot;back&quot;按钮放进头部栏，你可以自己加一个需要的按钮或者给头部栏添加”data-backbtn=&quot;false&quot;属性</div></div>
  <h1>添加按钮 Adding buttons</h1>
<div class="desc"><div>在标准的头部栏的设置下，标题文字两边各有一个可放置按钮的位置。每一个按钮通常都是都是a,但是任何有效的按钮标记的元素都可以。为了节省空间，工具栏里的按钮都是内联按钮，所以按钮的宽度只容纳icon和里面的文字</div></div>

  <h1>创建自定义的后退按钮 Creating custom back buttons</h1>
<div class="desc"><div>给a标签增加data-rel="back"的属性，任何链接都可以样式化为后退按钮，行为上为后退到上一个历史记录的页面，无视该链接的herf地址。这对于要链接回到一个命名好的页面的情况是很有用的<strong>但是注意请给链接设定一个有意义的herf地址，指向实际要连接的页面，使得C级浏览器也能够使用这个按钮</strong>而且要注意如果你只是需要一个后退的页面转场效果，而不是真正的后退到上一个历史记录的页面，应该用data-direction="reverse" 的属性，而不是用data-rel="back"属性的按钮</div></div>

  <h1>按钮默认的定位 Default button positioning</h1>
<div class="desc"><div>头部的按钮是头部栏容器的直接子节点，第一个链接定位于头部栏左边，第二个链接放在右边，在这个例子中，根据两个链接在源代码中的位置，取消在左边，保存在右边</div></div>
  <div class="code"> 
    <p>&lt;div data-role=&quot;header&quot; data-position=&quot;inline&quot;&gt;<br /> 
      　
&lt;a href=&quot;index.html&quot; data-icon=&quot;delete&quot;&gt;Cancel&lt;/a&gt;<br /> 
　
&lt;h1&gt;Edit Contact&lt;/h1&gt;<br /> 
　
&lt;a href=&quot;index.html&quot; data-icon=&quot;check&quot;&gt;Save&lt;/a&gt;<br />
&lt;/div&gt;</p>
</div>

	<p class="indent"><strong>按钮默认的定位</strong></p>
  <img src="../../images/Header bars_2.png" tppabs="http://www.jqmapi.com/images/Header%20bars_2.png">
    
<div class="desc">
  <div>按钮会自动应用他们的父容器的主题样式，所以应用了"a"主题样式的头部栏里的按钮也会应用"a"主题样式，我们通过给按钮增加data-theme的属性并设置，可以使按钮看起来有所区别</div></div> 
  <div class="code"> 
    <p>&lt;div data-role=&quot;header&quot; data-position=&quot;inline&quot;&gt;<br /> 
      　
&lt;a href=&quot;index.html&quot; data-icon=&quot;delete&quot;&gt;Cancel&lt;/a&gt;<br /> 
　
&lt;h1&gt;Edit Contact&lt;/h1&gt;<br /> 
　
&lt;a href=&quot;index.html&quot; data-icon=&quot;check&quot; data-theme=&quot;b&quot;&gt;Save&lt;/a&gt;<br />
&lt;/div&gt;</p>
</div>

  <img src="../../images/Header bars_3.png" tppabs="http://www.jqmapi.com/images/Header%20bars_3.png">
  
  
<div class="desc">
  <h1>通过class控制按钮的定位　Controlling button position with classes</h1>
  <div>按钮的位置可以通过class设置，而不依赖他们在源代码中的顺序。如果你想把唯一一个按钮放在右边，这时就非常有用了。两个控制的类为ui-btn-right 和ui-btn-left</div>
  <div>在这个例子中，我们要把头部栏唯一一个按钮放于右边，首先给头部栏增加data-backbtn="false"属性来阻止头部栏自动生成后退按钮的行为，然后给自己的按钮增加ui-btn-right的class</div>
  </div> 
  <div class="code"> 
    <p>&lt;div data-role=&quot;header&quot; data-position=&quot;inline&quot; data-backbtn=&quot;false&quot;&gt;<br />
&lt;h1&gt;Page Title&lt;/h1&gt;<br />
&lt;a href=&quot;index.html&quot; data-icon=&quot;gear&quot; class=&quot;ui-btn-right&quot;&gt;Options&lt;/a&gt;<br />
&lt;/div&gt;</p>
</div>

  <img src="../../images/Header bars_4.png" tppabs="http://www.jqmapi.com/images/Header%20bars_4.png">

<div class="desc">
  <h1>自定义头退按钮的文字　Customizing the back button text</h1>
  <div>如果你想设置后退按钮的文字，需要给页面?page"元素增加data-back-btn-text="文字"的属性，或者通过程序来实现?$.mobile.page.prototype.options.backBtnText = "文字";</div>
  <div>如果你想配置后退按钮的主题样式，使用  $.mobile.page.prototype.options.backBtnTheme = &quot;a&quot; 如果你要用这段程序，需要在mobileinit时间的处理程序中使用</div>
  </div>

<div class="desc">
  <h1>自定义头部栏的配置　Custom header configurations</h1>
  <div>如果你想创建一个不遵循默认配置的头部栏，在header容器里用div包裹你的自定义内容就好，Jquery Mobile不会自动生成按钮，所以你可以给你的头部栏自定义你的样式</div>
  </div>
</div>
</div>
<iframe  id="iFrame1" width="160px" scrolling="no" frameborder="0" allowtransparency="true" src="../../adsense_r.html" tppabs="http://www.jqmapi.com/adsense_r.html" onload="this.height=iFrame1.document.body.scrollHeight" ></iframe>
</body>
</html>



